<template>
  <div id="mingce">
    <div id="tree">
      <el-scrollbar style="height:calc(100% - 75px);">
          <h1>1. 选择单位</h1>
          <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="treeinput"></el-input>
          <el-switch style="margin:5px 0 10px 60px" v-model="liandongkaiguan" active-color="#13ce66" :active-value="false" active-text="联动选择" inactive-color="#ff4949" :inactive-value="true" inactive-text="不联动选择"></el-switch>
          <el-tree accordion node-key="id" :default-expanded-keys="[1]" :expand-on-click-node="false" :check-strictly="liandongkaiguan" :render-content="renderContent" class="filter-tree" :data="treedata" :filter-node-method="filterNode" ref="tree" empty-text="正在加载..." show-checkbox @check-change="handleCheckChange"></el-tree>
      </el-scrollbar>
    </div>
    <div id="deptdetail" style="overflow:auto;">
      <el-form :model="mingceForm" label-width="100px" :rules="mingceFormRules" ref="mingceForm">
        <h1>
          2. 选择人员条件
        </h1>
        <el-form-item label="分类" prop="Fenlei" style="width:900px;">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group v-model="checkedbzfenleioptions" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="item in bzfenleioptions" :label="item" :key="item">{{item}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="人员身份" prop="Shenfen" style="width:900px;">
          <el-checkbox :indeterminate="isIndeterminate2" v-model="checkAll2" @change="handleCheckAllChange2">全选</el-checkbox>
          <el-checkbox-group v-model="checkedbzshenfenoptions" @change="handleCheckedCitiesChange2">
            <el-checkbox v-for="item in bzshenfenoptions" :label="item" :key="item">{{item}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="职务级别" prop="Zhiwu" style="width:900px;">
          <el-checkbox :indeterminate="isIndeterminate3" v-model="checkAll3" @change="handleCheckAllChange3">全选</el-checkbox>
          <el-checkbox-group v-model="checkedbzzhiwuoptions" @change="handleCheckedCitiesChange3">
            <el-checkbox v-for="item in bzzhiwuoptions" :label="item" :key="item">{{item}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="">
          <el-checkbox v-model="ageItemChecked" @change="showAgeItem">更多选项</el-checkbox>
        </el-form-item>
        <div  v-show="AgeItemVisible" ref="AgeItem">
          <el-form-item label="年龄条件">
            从 <el-input-number v-model="AgeFrom" :min="0" :max="200" label="开始年龄"></el-input-number>
            — <el-input-number v-model="AgeTo" :min="0" :max="200" label="结束年龄"></el-input-number>
            岁 按 <el-date-picker v-model="AgeDate" type="date" placeholder="选择日期"></el-date-picker> 计算年龄
          </el-form-item>
        </div>
        <h1>
          3. 选择输出字段
        </h1>
        <el-form-item label="输出字段" prop="Output" style="width:900px;">
          <el-checkbox :indeterminate="isIndeterminate4" v-model="checkAll4" @change="handleCheckAllChange4">全选</el-checkbox>
          <el-checkbox-group v-model="checkedoutputoptions" @change="handleCheckedCitiesChange4">
            <el-checkbox v-for="item in outputoptions" :label="item" :key="item">{{item}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <h1>
          4. 点击按钮开始生成
        </h1>
        <div style="clear:both; display:block;margin:40px 0 0 100px;">
          <el-button type="primary" @click.native="mingceSubmit" :loading="mingceloading">生成名册</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      checkAll: true,
      checkAll2: true,
      checkAll3: true,
      checkAll4: false,
      isIndeterminate: false,
      isIndeterminate2: false,
      isIndeterminate3: false,
      isIndeterminate4: false,
      treeVisible: true,
      treedata: [],
      filterText: '',
      liandongkaiguan: false,
      mingceForm: {},
      mingceFormRules: {},
      bzfenleioptions: [],
      checkedbzfenleioptions: [],
      bzshenfenoptions: [],
      checkedbzshenfenoptions: [],
      bzzhiwuoptions: [],
      checkedbzzhiwuoptions: [],
      outputoptions: [],
      checkedoutputoptions: [],
      mingceloading: false,
      AgeItemVisible: false,
      AgeFrom: '',
      AgeTo: '',
      AgeDate: '',
      ageItemChecked: false
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    showAgeItem () {
      this.AgeItemVisible = this.ageItemChecked
    },
    handleCheckAllChange (val) {
      this.checkedbzfenleioptions = val ? this.bzfenleioptions : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.bzfenleioptions.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.bzfenleioptions.length
    },
    handleCheckAllChange2 (val) {
      this.checkedbzshenfenoptions = val ? this.bzshenfenoptions : []
      this.isIndeterminate2 = false
    },
    handleCheckedCitiesChange2 (value) {
      let checkedCount = value.length
      this.checkAll2 = checkedCount === this.bzshenfenoptions.length
      this.isIndeterminate2 = checkedCount > 0 && checkedCount < this.bzshenfenoptions.length
    },
    handleCheckAllChange3 (val) {
      this.checkedbzzhiwuoptions = val ? this.bzzhiwuoptions : []
      this.isIndeterminate3 = false
    },
    handleCheckedCitiesChange3 (value) {
      let checkedCount = value.length
      this.checkAll3 = checkedCount === this.bzzhiwuoptions.length
      this.isIndeterminate3 = checkedCount > 0 && checkedCount < this.bzzhiwuoptions.length
    },
    handleCheckAllChange4 (val) {
      this.checkedoutputoptions = val ? this.outputoptions : []
      this.isIndeterminate4 = false
    },
    handleCheckedCitiesChange4 (value) {
      let checkedCount = value.length
      this.checkAll4 = checkedCount === this.outputoptions.length
      this.isIndeterminate4 = checkedCount > 0 && checkedCount < this.outputoptions.length
    },
    handleCheckChange () {
      console.log(this.$refs.tree.getCheckedKeys())
    },
    renderContent (h, { node, data, store }) {
      console.log('测试：' + this.value1)
      return (
        <span class="custom-tree-node" style="width:100%" title={data.title} >
          <i class={data.className} />
          <span style="line-height:28px">{node.label}</span>
        </span>
      )
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getTree () {
      console.log('重新获取树')
      var _this = this
      this.TreeLoading = true
      this.$http
        .post(`/unit/list`)
        .then(function (response) {
          _this.TreeLoading = false
          if (response.data.IsSuccess === true) {
            console.log('获取成功')
            console.log(response.data.Result)
            _this.treedata = response.data.Result
          } else {
            console.log('获取失败:' + response.data.Msg)
            _this.$message({
              message: '获取失败:' + response.data.Msg,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    getDics () {
      var _this = this
      this.minzuLoading = true
      this.$http
        .post(`/unit/bianzhidics`)
        .then(function (response) {
          _this.minzuLoading = false
          if (response.data.IsSuccess === true) {
            console.log('获取成功')
            for (var i = 0; i < response.data.Result.Fenlei.length; i++) {
              _this.bzfenleioptions.push(response.data.Result.Fenlei[i].label)
            }
            _this.checkedbzfenleioptions = _this.bzfenleioptions
            for (i = 0; i < response.data.Result.Shenfen.length; i++) {
              _this.bzshenfenoptions.push(response.data.Result.Shenfen[i].label)
            }
            _this.checkedbzshenfenoptions = _this.bzshenfenoptions
            for (i = 0; i < response.data.Result.Zhiwu.length; i++) {
              _this.bzzhiwuoptions.push(response.data.Result.Zhiwu[i].label)
            }
            _this.checkedbzzhiwuoptions = _this.bzzhiwuoptions
          } else {
            console.log('获取失败:' + response.data.Msg)
            _this.$message({
              message: '获取失败:' + response.data.Msg,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    getDics2 () {
      var _this = this
      this.minzuLoading = true
      this.$http
        .post(`/mingce/outputdics`)
        .then(function (response) {
          _this.minzuLoading = false
          if (response.data.IsSuccess === true) {
            console.log('获取成功')
            _this.outputoptions = response.data.Result
          } else {
            console.log('获取失败:' + response.data.Msg)
            _this.$message({
              message: '获取失败:' + response.data.Msg,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    mingceSubmit: function () {
      if (this.$refs.tree.getCheckedKeys().length === 0) {
        this.$message({
          message: '请先选择单位',
          type: 'error'
        })
      } else {
        if (this.checkedbzfenleioptions.length === 0) {
          this.$message({
            message: '请选择分类',
            type: 'error'
          })
        } else {
          if (this.checkedbzshenfenoptions.length === 0) {
            this.$message({
              message: '请选择人员身份',
              type: 'error'
            })
          } else {
            if (this.checkedbzzhiwuoptions.length === 0) {
              this.$message({
                message: '请选择职务级别',
                type: 'error'
              })
            } else {
              if (this.AgeItemVisible) {
                if (this.AgeFrom === undefined) {
                  this.$message({
                    message: '请填写开始年龄',
                    type: 'error'
                  })
                } else {
                  if (this.AgeTo === undefined) {
                    this.$message({
                      message: '请填写结束年龄',
                      type: 'error'
                    })
                  } else {
                    if (!this.AgeDate) {
                      this.$message({
                        message: '请填写年龄计算时间',
                        type: 'error'
                      })
                    } else {
                      let para = {
                        Jigous: this.$refs.tree.getCheckedKeys(),
                        Fenleis: this.checkedbzfenleioptions,
                        Shenfens: this.checkedbzshenfenoptions,
                        Zhiwus: this.checkedbzzhiwuoptions,
                        Outputs: this.checkedoutputoptions,
                        AgeFrom: this.AgeFrom,
                        AgeTo: this.AgeTo,
                        AgeDate: this.AgeDate
                      }
                      this.mingceSubmitPost(para)
                    }
                  }
                }
              } else {
                let para = {
                  Jigous: this.$refs.tree.getCheckedKeys(),
                  Fenleis: this.checkedbzfenleioptions,
                  Shenfens: this.checkedbzshenfenoptions,
                  Zhiwus: this.checkedbzzhiwuoptions,
                  Outputs: this.checkedoutputoptions
                }
                this.mingceSubmitPost(para)
              }
            }
          }
        }
      }
    },
    mingceSubmitPost: function (para) {
      this.mingceloading = true
      var _this = this
      this.$http.post(`/mingce/download`, para, {responseType: 'blob'}).then(function (response) {
        if (response.data.IsSuccess === false) {
          _this.$message({
            message: '失败1:' + response.data.Msg,
            type: 'error'
          })
          _this.mingceloading = false
        } else {
          let filename = '名册.xls'
          _this.fileDownload(response.data, filename)
          _this.mingceloading = false
        }
      }).catch(function (error) {
        console.log(error)
        _this.$message({
          message: '失败2:' + error,
          type: 'error'
        })
        _this.mingceloading = false
      })
    },
    fileDownload: function (data, fileName) {
      let blob = new Blob([data], {
        type: 'application/octet-stream'
      })
      let filename = fileName || 'filename.xls'
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(blob, filename)
      } else {
        var blobURL = window.URL.createObjectURL(blob)
        var tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = blobURL
        tempLink.setAttribute('download', filename)
        if (typeof tempLink.download === 'undefined') {
          tempLink.setAttribute('target', '_blank')
        }
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        window.URL.revokeObjectURL(blobURL)
      }
    }
  },
  mounted () {
    this.getTree()
    this.getDics()
    this.getDics2()
  }
}
</script>
<style>
#mingce h1{
  margin:10px 12px 5px
}
#tree i{
  padding-right:5px;
}
#mingce i.icon-wenjianjia1{
  color:#ffc500 !important;
}
#mingce i.icon-cf-c24{
  color:#1296db !important;
}
#mingce i.icon-danwei{
  color:#6fb400 !important;
}
#mingce #tree {
  width: 320px;
  border-right:1px solid #eee;
  height:100%;
  background: #f3f3f3;
  padding-top:0;
  padding-right:0;
  margin-top:0;
  overflow: hidden;
  float: left;
  position: fixed;
}
#mingce #deptdetail{
  margin-left:320px;
  padding:10px;
}
#mingce .el-tree{
  background: #f3f3f3;
}
#mingce .custom-tree-node {
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
#editswitch{
  margin: 15px;
  text-align: right;
  line-height: 20px;
  font-size: 14px;
}
#mingce .treeinput{
  margin: 10px;
  width: 300px;
}
#mingce .deptbuttons{
  float:right;
}
</style>
